<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta charset="utf-8">
    <title>Solutions</title>
    <meta name="keywords" />
    <meta name="description" />
    <meta name="format-detection" content="telephone=no">
    <link rel="shortcut icon" href="./images/zh_CN.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/animate.min.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/aos.css">
    <link rel="stylesheet" href="./css/swiper.css">
    <link rel="stylesheet" href="./css/solutions.css">
</head>

<body>
    <div class="home">

        <div class="header">
            <a href="index.html" class="logo">
                <img src="./images/logo.png" alt="">
            </a>
            <div class="links f_18">
                <a href="./about.html">about</a>
                <a href="./products.html">products</a>
                <a class="on" href="./solutions.html">solutions</a>
                <a href="./cases.html">cases</a>
                <a  href="./contact.html">contact</a>
            </div>
        </div>


        <div class="pheader">
            <div class="menu">
                <div class="l">
                    <a href="./index.html" target="_self" class="animated fadeInUpLeft">
                        <img src="./images/logo.png" alt="">
                    </a>
                </div>
                <div class="navbox">
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                </div>
            </div>
        </div>

        <div class="menuList">
            <div class="item">
                <div class="tb">
                    <a href="./index.html">Home</a>
                </div>
            </div>
            <div class="item">
                <div class="tb">
                    <a href="./about.html">about</a>
                </div>
            </div>
            <div class="item">
                <div class="tb">
                    <a href="./products.html">
                        products
                    </a>
                </div>
            </div>
            <div class="item">
                <div class="tb">
                    <a href="./solutions.html">
                        solutions
                    </a>
                </div>
            </div>
            <div class="item">
                <div class="tb">
                    <a href="./cases.html">
                        cases
                    </a>
                </div>
            </div>
            <div class="item">
                <div class="tb">
                    <a href="./contact.html">
                        contact
                    </a>
                </div>
            </div>
        </div>

        <div class="bg1">
            <img src="./images/bg1.png" alt="">
        </div>

        <div class="bg2">
            <img src="./images/bg_line.png" alt="">
        </div>

        <div class="bg3">
            <img src="./images/bg4.png" alt="">
        </div>


        <div class="main">

            <div class="title">
                <h1 class="f_96" aos="scale-opacity">solutions</h1>
                <div class="tag f_24" aos="scale-opacity">
                    Take technological innovation as the core driving force
                </div>
            </div>

            <div class="content" aos="scale-opacity">
                <a class="item"  href="./solution_info.html">
                    <div class="img">
                        <img src="./images/so12.png" alt="">
                    </div>
                    <div class="center">
                        <div class="num">1</div>
                        <div class="line">
                            <div></div>
                        </div>
                    </div>
                    <div class="r">
                        <div class="p1 f_48">Smart Library Solutions</div>
                        <div class="p2 f_24">
                            The Shanghai RFID Smart Library leverages an intelligent management system that seamlessly integrates various components.
                        </div>
                    </div>
                </a>
                <a class="item" href="./solution_info.html">
                    <div class="img">
                        <img src="./images/so2.png" alt="">
                    </div>
                    <div class="center">
                        <div class="num">2</div>
                        <div class="line">
                            <div></div>
                        </div>
                    </div>
                    <div class="r">
                        <div class="p1 f_48">Automated Book<br>Acquisition System</div>
                        <div class="p2 f_24">
                            Features and Functional Modules.
                        </div>
                    </div>
                </a>
                <a class="item" href="./solution_info.html">
                    <div class="img">
                        <img src="./images/so3.png" alt="">
                    </div>
                    <div class="center">
                        <div class="num">3</div>
                        <div class="line">
                            <div></div>
                        </div>
                    </div>
                    <div class="r">
                        <div class="p1 f_48">FRID Solutions</div>
                        <div class="p2 f_24">
                            RFID contactless payment for container sales is a solution based on RFID radio frequency identification technology.
                        </div>
                    </div>
                </a>
            </div>
        </div>

        <div class="foot">
            <div class="logo">
                <img src="./images/logo.png" alt="">
            </div>
            <div class="d1">
                <div class="l">
                    <div class="item">
                        <p class="p1 f_18">about</p>
                        <div class="aList">
                            <a href="./about.html">Overview</a>
                            <a href="./about.html?id=md1">History</a>
                            <a href="./about.html?id=md2">Client</a>
                        </div>
                    </div>
                    <div class="item">
                        <p class="p1 f_18">products</p>
                        <div class="aList">
                            <a href="./products.html">Hardware</a>
                            <a href="./products.html">Software</a>
                        </div>
                    </div>
                    <div class="item">
                        <p class="p1 f_18">solutions</p>
                        <div class="aList">
                            <a href="./solution_info.html">Smart Library Solutions</a>
                            <a href="./solution_info.html">Automated Book </a>
                            <a href="./solution_info.html">FRID Solutions</a>
                        </div>
                    </div>
                    <div class="item">
                        <p class="p1 f_18">cases</p>
                        <div class="aList">
                            <a href="./cases.html">Public libraries</a>
                            <a href="./cases.html">universities</a>
                            <a href="./cases.html">primary&middle schools</a>
                        </div>
                    </div>
                    <div class="item">
                        <p class="p1 f_18">contact</p>
                        <div class="aList">
                            <a href="./contact.html">Contact us</a>
                        </div>
                    </div>
                </div>
                <div class="r">
                    <p class="p1 f_18">Follow Us</p>
                    <div class="icons">
                        <a href="">
                            <img src="./images/icon1.svg" alt="">
                        </a>
                        <a href="">
                            <img src="./images/icon2.svg" alt="">
                        </a>
                        <a>
                            <img src="./images/icon3.svg" alt="">
                            <div class="code animated fadeIn">
                                <img src="./images/code.png" alt="">
                            </div>
                        </a>
                        <a href="">
                            <img src="./images/icon4.svg" alt="">
                        </a>
                        <a href="">
                            <img src="./images/icon5.svg" alt="">
                        </a>
                        <a href="">
                            <img src="./images/icon6.svg" alt="">
                        </a>
                    </div>
                    <div class="info">
                        E-mail：rfid@sh-rfid.com<br>
                        Tel: +86-21-54262851, 54262853, 54262850<br>
                        Add: No. 810, Yishan Road, Shanghai<br>
                        Hotline: 4000089558
                    </div>
                </div>
            </div>
            <div class="d2">
                <div class="l">
                    © 2024 Zhitu Chuangxiang Co., Ltd. All Rights Reserved
                </div>
                <div class="r">
                    <a href="">Imprint</a>
                    <span></span>
                    <a href="">Privacy Policy</a>
                </div>
            </div>
        </div>


    </div>
    <script src="./js/jquery-3.6.1.min.js"></script>
    <script src="./js/swiper.js"></script>
    <script src="./js/gsap.min.js"></script>
    <script src="./js/ScrollTrigger.min.js"></script>
    <script src="./js/lenis.min.js"></script>
    <script src="./js/aos.js"></script>
    <script src="./js/common.js"></script>
    <script src="./js/swiper.js"></script>
    <script>
        var w = $(window).width()
        if (w > 1024) {
            ScrollTrigger.create({
                trigger: '.home .main .content .item:first-child',
                start: 'top 70%',
                end: '+=400',
                onUpdate: (self) => {
                    var progress = self.progress
                    var blur = 6 + progress*-6
                    $('.home .main .content .item:first-child').css({
                        'filter': 'blur('+blur+'px)',
                    })
                },
            });
            $('.home .main .content .item').each(function (i,e) {
                ScrollTrigger.create({
                    trigger: e,
                    start: 'top 40%',
                    end: '+=200',
                    onUpdate: (self) => {
                        var progress = self.progress
                        var h = Math.round(progress*100)
                        var blur = 6 + progress*-6
                        $(e).next().css({
                            'filter': 'blur('+blur+'px)',
                        })
                        $(e).find('.center .line div').css('height',h+'%')
                    },
                });
            })
        }
    </script>
</body>

</html>